<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <input type="checkbox" class="all" onclick="SelectAll()"> 选中全部 <br>
    <input type="checkbox" class="select"> 选项1 <br>
    <input type="checkbox" class="select"> 选项2 <br>
    <input type="checkbox" class="select"> 选项3 <br>
    <input type="checkbox" class="select"> 选项4 <br>
</body>
<script>
    let all = document.querySelector('.all');
    let select = document.querySelectorAll('.select');
    //为选中全部注册事件
    function SelectAll() {
       for(var i = 0 ; i < select.length ; i++)
       {
            select[i].checked = all.checked;
            //注意这里表示点击选中全部之后，所有选项状态和选中全部按钮同步
       }
    }
    //为每个选项注册事件
       for(var i = 0 ; i < select.length ; i++)
       {
            select[i].onclick = function () {
                all.checked = isAll(select);
            }
       }
    //只要有一个不是true就返回false 达到某个选项取消,则自动取消全选按钮
    function isAll(select) {
        for(var i = 0 ; i < select.length ; i++)
        {
            if(select[i].checked == false)
                return false;
        }
        return true;
    }   

</script>
</html>